<?php include_once 'header.php'; ?>
<style>
/*弹出层插件样式开始*/
.Prompt_floatBoxBg{display:none;width:100%;height:100%;background:#000;position:fixed !important;/*ie7 ff*/position:absolute;top:0;left:0;filter:alpha(opacity=0);opacity:0; z-index:999;}
.Prompt_floatBox{
display: block;
position: absolute;
padding:6px;
text-align:center;
top: 404.5px;
left: 531.5px;
height: auto;
z-index: 10000;
word-wrap: break-word;
-webkit-box-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 15px;
box-shadow: rgba(0, 0, 0, 0.498039) 0px 0px 15px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
background-color: white;
opacity: 1;
}

.Prompt_floatBox .content{padding:10px;background:#fff;overflow-x:hidden;overflow-y: auto;}
/*弹出层插件样式结束*/

.highcharts-navigator-handle-right{display:none;}
.highcharts-navigator-handle-left{display:none;}
body table thead td{background: none;}
</style>

<script src="/public/statics_v2/js/libs/highstock5/highstock.min.min.js"></script>
<script src="/public/statics_v2/js/libs/highstock5/modules/exporting.js"></script>



<div class="head clearfix">
    <div class="left">
        <div class="wrapper">
            <i>用户</i>
            <span class="user_body_phone"><?php echo($user->body_phone); ?></span>
        </div>
    </div>
    <div class="middle">
        <span><a href="/account/pay" style=" text-decoration: none; color:#7f8287;">充值</a> </span>
    </div>
    <div class="middle">
        <span><a href="/account/withdraw" style=" text-decoration: none; color:#7f8287;">提现</a></span>
    </div>
    <div class="right">
        <div class="wrapper">
            <i>可用余额</i>
            <span class="user_body_balance" id="user_body_balance"><?php echo($user->body_balance); ?> </span>
        </div>
    </div>
</div>



<div class="container objectsDetail" style="">
    <table data-name="<?php echo $item->body_name; ?>" data-id="<?php echo $item->id; ?>" data-period="<?php echo $period; ?>" class="objectsDetail">
        <thead>
            <tr style="background:#111">
                <td colspan="4" width="50%">商品</td>
                <td colspan="2">买入</td>
                <td colspan="2">卖出</td>
            </tr>
        </thead>
        <tbody>
            <tr data-id="<?php echo $item->id; ?>" class="clearLine">
                <td colspan="4"><?php echo $item->body_name; ?> <?php echo($item->body_name_english); ?></td>
                <td colspan="2" class="price <?php
                    if($item->body_price_previous > $item->body_price) echo 'green';
                    else echo 'red';  
                ?>"><?php echo(sprintf('%.' . $item->body_price_decimal . 'f', $item->body_price)); ?></td>
                <td colspan="2" class="price <?php
                    if($item->body_price_previous > $item->body_price) echo 'green';
                    else echo 'red';  
                ?>"><?php echo(sprintf('%.' . $item->body_price_decimal . 'f', $item->body_price)); ?></td>
            </tr>
            <tr data-id="<?php echo $item->id; ?>">
                <td colspan="8"><p>更新时间: <span class="updateTime"><?php echo date('Y-m-d H:i:s', strtotime($item->updated_at)); ?></span></p></td>
            </tr>
            <tr>
                <td colspan="3">
                    <div id="stakeSelector" class="selector">
                        <label for="select_stake">金额选择</label>
                        <input readonly="readonly" id="select_stake" type="number" value="50">
                        <ul style="display: none;">
                            <!--<li><a href="javascript:$('#select_stake').val(10); $('#stakeSelector ul').hide();">10</a></li>-->
                            <li><a href="javascript:$('#select_stake').val(50); $('#stakeSelector ul').hide();">50</a></li>
                            <li><a href="javascript:$('#select_stake').val(100); $('#stakeSelector ul').hide();">100</a></li>
                            <li><a href="javascript:$('#select_stake').val(200); $('#stakeSelector ul').hide();">200</a></li>
                            <li><a href="javascript:$('#select_stake').val(500); $('#stakeSelector ul').hide();">500</a></li>
                            <li><a href="javascript:$('#select_stake').val(1000); $('#stakeSelector ul').hide();">1000</a></li>
                            <li><a href="javascript:$('#select_stake').val(2000); $('#stakeSelector ul').hide();">2000</a></li>
							<li><a href="javascript:$('#select_stake').val(5000); $('#stakeSelector ul').hide();">5000</a></li>
                        </ul>
                    </div>
                </td>
                <td colspan="2">
                    <div id="stakeSelector" class="selector">
                        <label for="select_stake">收益率</label>
                        <input readonly="readonly"   type="text" value="80%">

                    </div>
                </td>
                <td colspan="3">
                    <div id="timeSelector" class="selector">
                        <label for="select_time">时间选择</label>
                        <input readonly="readonly" id="select_time" type="text" value="60秒">
                        <ul style="display: none;">
                            <li><a href="javascript:$('#select_time').val('60秒'); $('#timeSelector ul').hide();">60秒</a></li>
                            <li><a href="javascript:$('#select_time').val('300秒'); $('#timeSelector ul').hide();">300秒</a></li>
                            <li><a href="javascript:$('#select_time').val('900秒'); $('#timeSelector ul').hide();">900秒</a></li>
                          
                        </ul>
                    </div>
                </td>
            </tr>
            <tr class="hasLine">
                <td data-period="1"<?php if($period==1) echo ' class="active"'; ?> colspan="2">分时</td>
                <td data-period="60"<?php if($period==60) echo ' class="active"'; ?> colspan="2">M1</td>
                <td data-period="300"<?php if($period==300) echo ' class="active"'; ?> colspan="2">M5</td>
                <td data-period="900"<?php if($period==900) echo ' class="active"'; ?> colspan="2">M15</td>
              <!--  <td data-period="1800"<?php /*if($period==1800) echo ' class="active"'; */?>>M30</td>
                <td data-period="3600"<?php /*if($period==3600) echo ' class="active"'; */?>>H1</td>
                <td data-period="86400"<?php /*if($period==86400) echo ' class="active"'; */?>>D1</td>
                <td data-period="604800"<?php /*if($period==604800) echo ' class="active"'; */?>>D7</td>
                <td data-period="2592000"<?php /*if($period==2592000) echo ' class="active"'; */?>>D30</td>-->
            </tr>
        </tbody>
    </table>
</div>




<div id="liveChart" style="width: 100%;  top: 197px;"></div>


<style type="text/css">
    #scrollData tr{border:0px solid white;}
    #scrollData tr td{height:1em;font-size: 1em;padding:0;margin:0; line-height: 1.8em;}
    .scrollDataTotal{background: #111;  color: white;  font-size: 0.9em;  border: 1px solid #666;  line-height: 20px;}
</style>
<div class="scrollDataTotal"><img src="/public/statics_v2/img/horn.png" style="width:.9em;"><span style="font-weight: bold;">&nbsp;</span>今日已有<span style="color:red;" id="people">0</span>人参与交易 买卖<span style="color:red;" id="business_total">0</span>次</div>
<div style="color:white;margin-bottom:6em;">
    <table id="scrollData">
        <tr id="scrollDataHead">
            <td>买入时间</td><td>买入资产</td><td>买入方向</td><td>买入量</td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    var lastTime = 0;
    setInterval(function(){
        $.get("/api/getBusinessData",{lastTime:lastTime},function(data){
            var totalData = data.totalData;
            $("#people").html(totalData.people);
            $("#business_total").html(totalData.business_total);
            var newData = data.newData;
            if(newData instanceof Array) {
                if (newData[0]) {
                    lastTime = newData[0].created_at;
                    for(var i = 0;i < newData.length; i++ ){
                        var color,text;
                        if(newData[i].body_direction == 1){
                            color = "red";
                            text = "看涨";
                        }else{
                            color = "green";
                            text = "看跌";
                        }

                        $("#scrollDataHead").after('<tr> <td>'+newData[i].created_at.replace(/[0-9]{4}-[0-9]{1,2}-[0-9]{1,2} /,"")+'</td><td style="color:'+color+'">'+ newData[i].object_name+'</td><td style="color:'+color+'">'+text+'</td><td>'+newData[i].body_stake+'</td> </tr>');
                        if($("#scrollData tr").length > 11){
                            $("#scrollData tr").last().remove();
                        }
                    }

                }
            }
        },'JSON');

    },3000);
</script>


<div class="bottomLine">
    <table>
        <tr>
            <td style="text-align: right;"><a id="orderDown" class="orderButton Down" href="#">看跌</a></td>
            <td style="width: 33.33%; text-align: center;" class="price price_now <?php
                if($item->body_price_previous > $item->body_price) echo 'green';
                else echo 'red';  
            ?>"><?php echo(sprintf('%.' . $item->body_price_decimal . 'f', $item->body_price)); ?></td>
            <td style="text-align: left;"><a id="orderUp" class="orderButton Up" href="#">看涨</a></td>
        </tr>
    </table>
</div>




<script type="text/html" id="templet_order_countDown">
    <div class="app_dialog weui_dialog_confirm">
        <div class="weui_mask"></div>
        <div class="weui_dialog" style="width: 85%;">
            <div class="weui_dialog_bd" style="padding: 0;">
                <table>
                    <tr>
                        <td style="width: 50%; line-height: 1.5em; padding: 12px 0; border-bottom: 1px solid #F3F3F3;">
                            <span class="title">交易品种</span>
                            <span class="content"><?php echo $item->body_name; ?> <?php echo($item->body_name_english); ?></span>
                        </td>
                        <td style="width: 50%; line-height: 1.5em; padding: 12px 0; border-bottom: 1px solid #F3F3F3;">
                            <span class="title">周期</span>
                            <span class="content">#TIME#</span>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 50%; line-height: 1.5em; padding: 12px 0; border-bottom: 1px solid #F3F3F3;">
                            <span class="title">金额选择</span>
                            <span class="content">#STAKE#</span>
                        </td>
                        <td style="width: 50%; line-height: 1.5em; padding: 12px 0; border-bottom: 1px solid #F3F3F3;">
                            <span class="title">收益率</span>
                            <span class="content">80%</span>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 50%; line-height: 1.5em; padding: 12px 0; border-bottom: 1px solid #F3F3F3;">
                            <span id="doneTitle" class="title">当前价格</span>
                            <span id="donePrice" class="content price <?php
                                if($item->body_price_previous > $item->body_price) echo 'green';
                                else echo 'red';  
                            ?>"><?php echo(sprintf('%.' . $item->body_price_decimal . 'f', $item->body_price)); ?></span>
                        </td>
                        <td style="width: 50%; line-height: 1; padding: 2px 0 0 0; border-bottom: 1px solid #F3F3F3;">
                            <div id="confirm_up" style="font-size: 18px; color: #COLOR#;"><span style="margin-right: 5px;" class="ion-arrow-up-b"></span>看涨</div>
                            <div id="confirm_down" style="font-size: 18px; color: #COLOR#;"><span style="margin-right: 5px;" class="ion-arrow-down-b"></span>看跌</div>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 50%; line-height: 1.5em; padding: 12px 0; border-bottom: 1px solid #F3F3F3;">
                            <span id="openTitle" class="title">开仓价格</span>
                            <span id="openPrice" class="content" style="color: #ed0000;">#PRICE#</span>
                        </td>
                        <td style="width: 50%; line-height: 1.5em; padding: 12px 0; border-bottom: 1px solid #F3F3F3;">

                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="width: 50%; line-height: 1.5em; padding: 12px 0; border-bottom: 0;">
                            <span class="countDownTitle">交易进行中...</span>
                            <span class="countDownClock">00:00:00</span>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="weui_dialog_ft" style="margin-top: 0;">
                <a id="app_dialog_callback" class="weui_btn_dialog primary">继续下单</a>
                <a id="app_dialog_close" href="javascript:app.services.dialog.remove();" class="weui_btn_dialog default">关闭</a>
            </div>
        </div>
    </div>
</script>
<script type="text/html" id="templet_dialog_confirm">
    <div class="app_dialog weui_dialog_confirm">
        <div class="weui_mask"></div>
        <div class="weui_dialog" style="width: 85%;">
            <div class="weui_dialog_bd" style="padding: 0;">
                <table>
                    <tr>
                        <td style="width: 50%; line-height: 1.5em; padding: 12px 0; border-bottom: 1px solid #F3F3F3;">
                            <span class="title">交易品种</span>
                            <span class="content"><?php echo $item->body_name; ?> <?php echo($item->body_name_english); ?></span>
                        </td>
                        <td style="width: 50%; line-height: 1.5em; padding: 12px 0; border-bottom: 1px solid #F3F3F3;">
                            <span class="title">周期</span>
                            <span class="content">#TIME#</span>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 50%; line-height: 1.5em; padding: 12px 0; border-bottom: 1px solid #F3F3F3;">
                            <span class="title">金额选择</span>
                            <span class="content">#STAKE#</span>
                        </td>
                        <td style="width: 50%; line-height: 1.5em; padding: 12px 0; border-bottom: 1px solid #F3F3F3;">
                            <span class="title">收益率</span>
                            <span class="content"><?php echo $item->body_profit * 100; ?>%</span>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 50%; line-height: 1.5em; padding: 12px 0; border-bottom: 0;">
                            <span class="title">当前价格</span>
                            <span class="gpu content price">--</span>
                        </td>
                        <td style="width: 50%; line-height: 1; padding: 2px 0 0 0; border-bottom: 0;">
                            <div id="confirm_up" style="font-size: 18px; color: #COLOR#;"><span style="margin-right: 5px;" class="ion-arrow-up-b"></span>看涨</div>
                            <div id="confirm_down" style="font-size: 18px; color: #COLOR#;"><span style="margin-right: 5px;" class="ion-arrow-down-b"></span>看跌</div>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="weui_dialog_ft" style="margin-top: 0;">
                <a id="app_dialog_callback" class="weui_btn_dialog primary">确定</a>
                <a id="app_dialog_close" href="javascript:app.services.dialog.remove();" class="weui_btn_dialog default">取消</a>
            </div>
        </div>
    </div>
</script>




<style>
.add_media_back{ width:100%; height:100%; background:rgba(0,0,0,0.1);  position:absolute; top:0; z-index:99999; position:fixed; top:0px;}
.add_media_back .add_media_content{ width:90%; margin:0 auto; height:14rem; background:#fff; margin-top:30%; border-radius:0.8rem;background-color: transparent;    /*background: url("../../img/chuanyuejian/pop.png");*/    background-size: 100% 100%;}
.add_media_back .add_media_content .add_media_title{ margin-top: 1rem; }
.add_media_back .add_media_content .add_media_title span{ padding-top:1.5rem;text-align:center;line-height:2rem; font-size:1rem;height:2rem; display:block; width:100%;}

.add_media_back .add_media_content .add_media_list{ width:90%; margin: 0 auto;}
.add_media_back .add_media_content .add_media_list span{   width:100%; text-align:center; margin-left:2%; margin-right:2%; padding-top:0.5rem; padding-bottom:0.5rem; font-size:0.8rem;}
 
 
</style>


<div class="add_media_back" id="add_media_back" onClick="hide_media()">
<div class="add_media_content">
<div class="add_media_title">
<span> </span>
</div>

<div class="add_media_list" >
<span>
    
</span>
 
 
</div>
<div >
 <span onClick="hide_media()" style="display:block; width:50%; height:2rem;line-height:2rem; margin:0.5rem auto;border-radius:0.5rem; color:#fff"> </span>
</div>
</div>
</div>

<script type="text/javascript">
 /*   var data = [
        [1234,140.28500,140.16900,140.29200,140.14800],
        [1235,140.33000,140.30400,140.33000,140.30400],
        [1236,140.21200,140.31700,140.35200,140.12400],
    ];

    //k线图函数
    Highcharts.stockChart('liveChart', {


        rangeSelector: {
            selected: 1
        },

        title: {
            text: 'AAPL Stock Price'
        },

        series: [{
            type: 'candlestick',
            name: 'AAPL Stock Price',
            data: data,
            dataGrouping: {
                units: [
                    [
                        'week', // unit name
                        [1] // allowed multiples
                    ], [
                        'month',
                        [1, 2, 3, 4, 6]
                    ]
                ]
            }
        }]
    });*/
</script>

<script>
function show_media(){
	$("#add_media_back").show();
}
function hide_media(){
	$("#add_media_back").hide();
}
</script>




<?php include_once 'footer.php'; ?>
